<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动表格</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      padding-left: 34px;
      margin: 0 auto;
      box-sizing: border-box;
      width: 880px;
      height: 800px;
      background: #d0d0d0;
      background: orange;
    }

    .addRow {
      padding: 5px;
    }

    .show,
    .edit {
      width: 796px;
      min-height: 25px;
      border: 1px solid #000;
      border-collapse: collapse;
    }

    .show {
      margin: 10px 0 88px 0;
    }

    th,
    td {
      border: 1px solid #000;
      height: 26px;
      min-width: 130px;
    }

    td {
      font-size: 14px;
    }

    .operate span {
      float: left;
      margin: 3px;
      padding: 5px 7px 0 7px;
      font-size: 12px;
      line-height: 20px;
      color: #040404;
      border: 1px solid #040404;
      background: #c3c3c3;
    }

    .edit {
      display: none;
      background: #fff;
    }

    .edit td input {
      margin: 2px 20px;
      width: 175px;
      height: 20px;
    }

    .edit td select {
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <div class="box">
    <button class="addRow">新增一行</button>
    <table class="show">
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody class="show-tb">
        <!-- <tr>
          <td>001</td>
          <td>张三</td>
          <td>男</td>
          <td>16</td>
          <td class="operate">
            <span class="moveDown">向上移动</span>
            <span class="moveUp">向上移动</span>
            <span class="delete">删除</span>
          </td>
        </tr> -->
      </tbody>
    </table>

    <table class="edit">
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" class="number"></td>
          <td><input type="text" class="uname"></td>
          <td>
            <select class="sex" name="" id="">
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </td>
          <td><input type="text" class="age"></td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    var data = [{
      stuNumber: 001,
      stuName: "张三",
      stuSex: "男",
      stuAge: 16,
    }, {
      stuNumber: 002,
      stuName: "李四",
      stuSex: "男",
      stuAge: 19,
    }, {
      stuNumber: 003,
      stuName: "张梅",
      stuSex: "女",
      stuAge: 22,
    }, {
      stuNumber: 004,
      stuName: "懒散",
      stuSex: "男",
      stuAge: 33,
    }]

    let show = document.querySelector(".show") //展示
    let show_tb = show.querySelector(".show-tb") //展示的主体
    let addRow = document.querySelector(".addRow") //新增一行按钮
    let edit = document.querySelector(".edit") //编辑的表格


    //渲染数据
    render(data, show_tb)

    //点击新增一行
    addRow.onclick = function () {
      let number = edit.querySelector(".number ") //可编辑表格的学号
      let uname = edit.querySelector(".uname ") //可编辑表格的学号
      let sex = edit.querySelector(".sex ") //可编辑表格的学号
      let age = edit.querySelector(".age ") //可编辑表格的学号
      // console.log(sex);

      //点击新增一行，就显示新增表格
      edit.style.display = "block"
      //然后在可编辑表格里面，输入信息，存入一个对象，然后向数组最后推送进去
      var obj = {}
      var stuNumber
      var stuName
      var stuSex
      var stuAge
      //当表格失去焦点的时候，拿到表单的值，然后推入对象obj之中！
      number.onblur = function () {
        stuNumber = number.value;
        obj.stuNumber = stuNumber
      }
      uname.onblur = function () {
        stuName = uname.value;
        obj.stuName = stuName
      }
      sex.onblur = function () {
        stuSex = sex.value;
        obj.stuSex = stuSex
      }
      //再最后这个获取年龄的时候，失去焦点时候，就把对象的数据存入到data之中
      age.onblur = function () {
        stuAge = age.value;
        obj.stuAge = stuAge
        data.push(obj)
        // console.log(obj);
        // console.log(data);
        show_tb.innerHTML = ""
        render(data, show_tb)
        //点击新增一行，就隐藏新增表格
        edit.style.display = "none"
      }
    }

    //点击删除功能
    show_tb.addEventListener("click", function (e) {
      // console.log(e.target);//点击所触发的元素
      if (e.target.innerHTML === "删除") {
        // console.log(e.target.parentNode);
        e.target.parentNode.parentNode.remove()
      }
    })
    //点击向上移动功能
    show_tb.addEventListener("click", function (e) {
      if (e.target.className === "moveUp") { //上点击事件
        // console.log(e.target.parentNode.parentNode);
        var preTr = e.target.parentNode.parentNode //当前行
        var preCon = preTr.innerHTML //当前行的内容
        var preIdx = 0 //假设为当前行的索引号
        var tbody = preTr.parentNode
        for (var i = 0; i < tbody.children.length; i++) { //遍历tbody，找到当前行的索引号
          if (tbody.children[i] == preTr) {
            var preIdx = i; //当前行的索引号
            break
          }
        }
        if (preIdx == 0) { //为第一行的时候，就返回，并且跳出
          return alert("已经是第一行了")
        }
        //找到当前行后，找出上一行
        var upTr = tbody.children[preIdx - 1] //这是当前行的上一行
        var upCon = upTr.innerHTML; //这是当前行的上一行的内容
        //然后把当前行的上一行，数据渲染为当前行
        tbody.children[preIdx - 1].innerHTML = preCon
        //当前行，数据跟换为当前行的上一行
        tbody.children[preIdx].innerHTML = upCon
      }
    })

    //点击向下移动功能
    show_tb.addEventListener("click", function (e) {
      if (e.target.className === "moveDown") {
        var preTr0 = e.target.parentNode.parentNode //这是当前行
        var preCon0 = preTr0.innerHTML; //这是当前行的内容
        var preIdx0 = 0; //假设为当前行的索引号
        var tbody = preTr0.parentNode //这是当前行的父元素
        //遍历tbody，找到当前行的索引号，然后利用这个索引号，来和当前行的上一行，进行内容的交换
        for (var i = 0; i < tbody.children.length; i++) { //找到当前行，就跳出循环
          if (tbody.children[i] === preTr0) {
            preIdx0 = i;
            break
          }
        }
        if (preIdx0 == tbody.children.length - 1) {
          return alert("这已经是最后一行了")
        }
        //找到当前行的下一行，
        var downTr0 = tbody.children[preIdx0 + 1]
        var downCon0 = downTr0.innerHTML
        // console.log(downCon0);
        // //对当前行和当前行的上一行的内容进行交换
        tbody.children[preIdx0].innerHTML = downCon0
        tbody.children[preIdx0 + 1].innerHTML = preCon0
      }
    })


    //渲染函数
    function render(data, ele) {
      data.forEach(function (item, i) {
        ele.innerHTML += `
        <tr>
          <td>${item.stuNumber}</td>
          <td>${item.stuName}</td>
          <td>${item.stuSex}</td>
          <td>${item.stuAge}</td>
          <td class="operate">
            <span class="moveUp">向上移动</span>
            <span class="moveDown">向下移动</span>
            <span class="delete">删除</span>
          </td>
        </tr>
        `
      })
    }
  </script>
</body>

</html>